var categoryList = [],
	category = null,
	categoryGoods = null,
	brandList = [],
	priceList = [],
	colorList = [],
	brandRadioGroup = null,
	priceRadioGroup = null,
	colorRadioGroup = null,
	brandIds = [],
	priceIds = [],
	colorIds = [];

$(() => {
	loadBaseData();
	queryCategoryList();
	category = new Category({
		data: categoryList,
		active: 0,
		name: 'category',
		container: '#category',
		onChange: res => {
			categoryGoods.scrollLocation(res.groupId);
		}
	});

	categoryGoods = new CategoryGood({
		data: categoryList,
		container: 'category_list',
		parentContainer: 'scroll_container',
		onClickItem: e => {
			navigateTo(`page/goods/details.html?id=${e.id}&groupId=${e.groupId}`)
		}
	});
	initCategoryListener();
});

loadBaseData = () => {
	queryBrandList(res => {
		brandList = res;
		brandRadioGroup = new RadioGroup({
			data: brandList,
			type: 'checkbox',
			actived: brandIds,
			el: 'brand',
			onChange: (res) => {
				console.log(res)
				brandIds = res.values;
				//$(`#brand`).html(res.names.join(','));
			}
		})
	})
	queryRangPrice(res => {
		priceList = res;
		priceRadioGroup = new RadioGroup({
			data: priceList,
			type: 'radio',
			actived: priceIds,
			el: 'price',
			onChange: (res) => {
				priceIds = res.values;
				//$(`#price`).html(res.names.join(','));
			}
		})
	})
	queryRangColors(res => {
		colorList = res;
		colorRadioGroup = new RadioGroup({
			data: colorList,
			type: 'checkbox',
			actived: colorIds,
			el: 'color',
			onChange: (res) => {
				colorIds = res.values;
				//$(`#color`).html(res.names.join(','));
			}
		})
	})
}

queryCategoryList = () => {
	setLoadingState(0, getStartText(), '', 'loading_layout_category', 'loading_spinner_category',
		'loading_state_img_category', 'loading_state_text_category', 'category_list');
	setTimeout(() => {
		setLoadingState(1, getStartText(), '', 'loading_layout_category', 'loading_spinner_category',
			'loading_state_img_category', 'loading_state_text_category');
		categoryList = getCategoryList();
		category.update(categoryList);
		categoryGoods.update(categoryList);
	}, 1000)
}

initCategoryListener = () => {
	$(`#filter_query`).on('click', e => {
		openRightPanel();
	})
	$(`#btn_close_right`).on('click', e => {
		closeRightPanel();
	})
	$(`#form_close`).on('click', e => {
		closeRightPanel();
	})
	$(`#rightPanelOverlay`).on('click', e => {
		closeRightPanel();
	})
	$(`#form_reset`).on('click', e => {
		onResetForm();
	})
	$(`#form_submit`).on('click', e => {
		onReloadCategoryList();
	})
	$(`#pick_brand`).on('click', e => {
		onPickBrand();
	})
	$(`#pick_price`).on('click', e => {
		onPickPrice();
	})
	$(`#pick_color`).on('click', e => {
		onPickColor();
	})
}

onResetForm = () => {
	brandIds = [];
	priceIds = [];
	colorIds = [];
	brandRadioGroup.reset();
	priceRadioGroup.reset();
	colorRadioGroup.reset();
}

onReloadCategoryList = () => {
	closeRightPanel();
	queryCategoryList();
}

onPickBrand = () => {
	brandRadioGroup && brandRadioGroup.open();
}

onPickPrice = () => {
	priceRadioGroup && priceRadioGroup.open();
}

onPickColor = () => {
	colorRadioGroup && colorRadioGroup.open();
}

openRightPanel = () => {
	const panel = document.getElementById('rightPanel');
	const overlay = document.getElementById('rightPanelOverlay');
	panel.classList.add('active');
	overlay.classList.add('active');
	document.body.style.overflow = 'hidden'; // 防止背景滚动
}

closeRightPanel = () => {
	const panel = document.getElementById('rightPanel');
	const overlay = document.getElementById('rightPanelOverlay');
	panel.classList.remove('active');
	overlay.classList.remove('active');
	document.body.style.overflow = 'auto'; // 恢复背景滚动
}
